<template>
  <span 
    class="comp-vr-status"
    :class="{
      'checked': !!value
    }"
    @click="onclick">
    <a-icon v-if="!!value" class="icon" type="check" />
  </span>
</template>
<script lang="ts">
import Vue from 'vue'

/** 操作 选中|非选中 状态展示组件 */
export default Vue.extend({
  props: {
    value: {
      type: Boolean,
      default(){
        return false
      }
    }
  },
  methods: {
    onclick(){
      this.$emit('click', !this.value)
    }
  }
})
</script>

<style lang="less" scoped>
.comp-vr-status {
  background: #fff;
  border: 1px solid #cbceff;
  border-radius: 8px;
  display: inline-block;
  font-size: 10px;
  height: 16px;
  text-align: center;
  width: 16px;

  .icon {
    display: inline-block;
    font-weight: bold;
    transform: scale(0.8) translateY(-2px);
    transform-origin: center center;
  }

  &.checked {
    background: #6973ff;
    color: #fff;
  }
}
</style>